<template>
<!-- Tab栏 教学点申报 -->
  <div>
      <div class="selectBtn">
        <div style="width: 400px;">
        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
            <el-select style="width: 120px;" v-model="selects" slot="prepend" placeholder="请选择">
            <el-option label="教学点名称" value="1"></el-option>
            <el-option label="教学点地址" value="2"></el-option>
            <el-option label="联系人姓名" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="teachingSchool('Query')"></el-button>
        </el-input>
        </div>
        <div>
            <el-button type="primary" @click="exportBouncedsss = true">新增申报</el-button>
            <!-- <el-button style="margin-left: 7px;">批量导入</el-button> -->
        </div>
      </div>
      <div>
          <el-button @click="teachingSchool()">全部</el-button>
          <el-button @click="teachingSchool('待审批')">申报中</el-button>
          <el-button @click="teachingSchool('已通过')">已通过</el-button>
          <el-button @click="teachingSchool('未通过')">未通过</el-button>
      </div>
      <div style="margin-top: 24px;">
        <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData"  max-height="450" style="width: 100%">
        <el-table-column label="申报类型" >
                <template slot-scope="{row}">
                    <p>
                      {{row.reviewType == 'add' ? '新增' : '注销'}}
                    </p>
                  </template>
        </el-table-column> reviewStatus
        <el-table-column label="状态" >
                <template slot-scope="{row}">
                    <p>
                      {{row.reviewStatus === 0 ? '未通过' : row.reviewStatus === 1 ? '申报中' : '已通过'}}
                    </p>
                  </template>
        </el-table-column>
        <el-table-column prop="name" label="教学点名称" ></el-table-column>
        <el-table-column prop="address" label="所属区县" ></el-table-column>
        <el-table-column prop="address" label="教学点地址" ></el-table-column>
        <el-table-column prop="contactsName" label="联系人姓名" ></el-table-column>
        <el-table-column prop="contactsTel" label="联系手机号" ></el-table-column>
        <el-table-column label="申报时间" >
                  <template slot-scope="{row}">
                    <p>
                      {{formatTime(row.reviewDate * 1000)}}
                    </p>
                  </template>
        </el-table-column>
        <el-table-column prop="licence" label="原因" ></el-table-column>
        <el-table-column label="操作" >
            <!-- <el-button type="text">再次申报</el-button> -->
                <template slot-scope="{row}">
                    <el-button type="text">
                      {{row.reviewStatus === 0 ? '再次申报' : row.reviewStatus === 1 ? '删除' : ''}}
                    </el-button>
                  </template>
        </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row
            type="flex"
            justify="center"
            style="margin-top: 20px"
        >
            <el-col :span="8">
            <el-pagination
                background
                layout=" prev, pager, next"
                :total="page.total"
                :page-sizes="[7, 10, 20, 50, 100]"
                :page-size="page.pageSize"
                @current-change="changePage"
                :current-page.sync="page.currentPage"
            ></el-pagination>
            </el-col>
        </el-row>
      </div>
      <!-- 高级搜索 -->
      <el-dialog title="教学点申报" width="700px" :visible.sync="exportBouncedsss">
        <div class="Top_seach">
          <div class="tabelskc"><div class="left_name">教学点名称：</div><div class="shuru"><el-input placeholder="请输入教学点名称" v-model="teachingInfos.name" /></div></div>
          <div class="tabelskc"><div class="left_name">教学点地址：</div><div class="shuru"><el-input placeholder="请输入教学点地址" v-model="teachingInfos.address" /></div></div>
          <div class="tabelskc"><div class="left_name">联系人姓名：</div><div class="shuru"><el-input placeholder="请输入联系人姓名" v-model="teachingInfos.contactsName" /></div></div>
          <div class="tabelskc"><div class="left_name">联系人电话：</div><div class="shuru"><el-input placeholder="请输入联系人电话" v-model="teachingInfos.contactsTel" /></div></div>
          <div class="tabelskc"><div class="left_name" style="margin-right: 8px;"> 所属区县:</div><div class="shuru">
                  <el-select v-model="teachingInfos.reviewType" placeholder="请选择" style="width: 100%;">
                    <el-option
                      v-for="item in optionsskc"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
              </div>
            </div>
          <div class="tabelskc"><div class="left_name">详细地址：</div><div class="shuru"><el-input placeholder="请输入详细地址" v-model="teachingInfos.infoAddress" /></div></div>
        </div>
          <span slot="footer" class="dialog-footer">
            <el-button style="mmargin-right: 8px;!important"  @click="exportBouncedsss = false">取 消</el-button>
            <el-button type="primary" @click="addServicesTeachingPoint()">提 交</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script>
import { teachingSchool, listArea, addServicesTeachingPoint } from '@/api'
export default {
  data () {
    return {
      selects: '',
      exportBouncedsss: false,
      input3: '',
      teachingInfos: {
        name: '', // 教学点名字
        address: '', // 教学点位置
        infoAddress: '', // 详细地址
        contactsName: '', // 联系人名字
        reviewType: '', // 所属地址
        contactsTel: '' // 联系人电话
      },
      page: {
        // 分页数据
        total: 0, // 总条数
        currentPage: 1, // 默认的页码 是第一个页  决定了当前页码是第几页
        pageSize: 10 // page-size的默认值是10条
      },
      optionsskc: [],
      tableData: []
    }
  },
  async created () {
    await this.listArea()
    this.teachingSchool()
  },
  methods: {
    // 请求教学点列表数据
    async teachingSchool (type) {
      let data = {}
      switch (type) {
        case 'Query':
          data = {
            searchType: +this.selects,
            searchContent: this.input3
          }
          break
        case '待审批':
          data = {
            type: 1
          }
          break
        case '已通过':
          data = {
            type: 2
          }
          break
        case '未通过':
          data = {
            type: 0
          }
          break
        case '高级搜索':
          data = this.teachingInfos
          this.value1 ? (data.time = new Date(this.value1).valueOf()) : console.log('')
          break
        case '批量不通过':
        // data =
          break
        default:
          data = {}
          break
      }
      data.page = this.page.currentPage
      const ser = await teachingSchool(data)
      console.log(ser)
      if (ser?.code === 200) {
        const { list, total } = ser?.data
        console.log('大数组的数据', list)
        this.tableData = list
        this.page.total = total
      }
    },
    // 新增机构教学
    async addServicesTeachingPoint () {
      const map = {
        name: '教学点名称',
        address: '教学点地址',
        infoAddress: '联系人姓名',
        contactsName: '联系人电话',
        reviewType: '所属区县',
        contactsTel: '详细地址'
      }
      for (const key in this.teachingInfos) {
        if (this.teachingInfos[key] === '') {
          this.$message({
            message: '请填写' + map[key],
            type: 'warning'
          })
          return
        }
      }
      const { name, address, reviewType, infoAddress, contactsName, contactsTel } = this.teachingInfos
      let msg = ''
      this.optionsskc.forEach((item) => {
        if (item.value === reviewType) {
          msg = item.label
        }
      })
      const a = address + msg + infoAddress
      const data = {
        servicesId: 2, // q用户个人ID
        name, // 教学点名称
        address: a, // 教学点地址
        contactsName, // 联系人姓名
        contactsTel // 联系人电话
      }
      const ser = await addServicesTeachingPoint(data)
      if (ser?.code === 200) {
        this.$message.success(ser.msg)
        this.exportBouncedsss = false
        this.teachingSchool()
      }
    },
    // 获取所在区县列表
    async listArea () {
      const ser = await listArea({ servicesId: 2 })
      if (ser.code === 200) {
        const { data } = ser
        this.optionsskc = data.map((item) => {
          return {
            label: item.areaName,
            value: item.areaCode
          }
        })
      }
    },
    // 格式化 毫秒级时间戳 1637338090875
    formatTime (item) {
      return this.$formatTime(item)
    },
    changePage (eva) {
      this.teachingSchool()
    }
  }
}
</script>

<style lang="less">
.Top_seach {
  .tabelskc {
    display: flex;
      margin-bottom: 24px;
    .shuru {
      width: 100%;
    }
    .left_name {
      width: 180px;
      height: 32px;
      text-align: right;
      line-height: 32px;
    }
  }
      .blocksss {
      padding: 0 0 0 75px;
      margin-bottom: 24px;
    }
  .category {
    padding: 0 0 0 20px;
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    .checkboxs {
      width: 500px;
      display: flex;
      flex-wrap: wrap;
      .el-checkbox {
        margin-right: 15px;
      }
    }
  }
  p {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #000000;
  }
}
    .el-button+.el-button {
        margin: 0;
    }
    .selectBtn {
        display: flex;
        margin-top: 15px;
        margin-bottom: 24px;
        align-items: center;
        justify-content: space-between;
    }

</style>
